<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片轮播特效</title>
    <link rel="stylesheet" href="../css/common.min.css">
    <link rel="stylesheet" href="../scripts/plugins/carousel/carousel-ysy.min.css">
</head>
<body>
<div class="carousel-ysy">
    <div class="wrap">
        <a href="#"><img src="../images/carousel1.jpg" alt="#"></a>
        <a href="#"><img src="../images/carousel2.jpg" alt="#"></a>
        <a href="#"><img src="../images/carousel3.jpg" alt="#"></a>
        <a href="#"><img src="../images/carousel4.jpg" alt="#"></a>

    </div>
    <ul class="carousel-btn">
        <li class="prev"></li>
        <li class="next"></li>
    </ul>
    <div class="carousel-tip">
        <p>It's sucks, but you will love it</p>
    </div>
</div>

<script src="../scripts/vendor/jquery-3.4.1/jquery-3.4.1.min.js"></script>
<script src="../scripts/vendor/velocity/velocity.js"></script>
<script src="../scripts/plugins/carousel/carousel-ysy.js"></script>
<script>
    $(function () {
        $("div.carousel-ysy").carousel({
            width: "100%",         // 容器宽度
            height: 400,        // 容器高度
            curPage: 1,         // 当前显示页
            isAutoPlay: true,   // 是否自动播放
            playInterval: 1000, // 自动播放时间
            isFullPage: true,   // 是否全屏展示
            playEffect: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13],    // 移动端支持 0-7
            isNavBtn: true,    // 是否显示导航按钮
        });
    });
</script>
</body>
</html>
